<template>
	<!-- <view class="zan-toptips" :class="isShow ? 'zan-toptips--show' : ''" :style="[{'background-color':backgroundColor }]">{{ content }}</view> -->

</template>

<script>
	export default {
		computed: {
			backgroundColor() {
				return this.backgroundColor;
			}
		},
		props: {
			content: String,
			color: {
				type: String,
				value: FONT_COLOR
			},
			backgroundColor: {
				type: String,
				value: BG_COLOR
			},
			isShow: {
				type: Boolean,
				value: false
			},
			duration: {
				type: Number,
				value: 3000
			}
		},
		data() {
			return {}
		},
		methods: {
			show: function show() {
				var _this = this;

				var duration = this.data.duration;


				this._timer && clearTimeout(this._timer);
				this.setData({
					isShow: true
				});

				if (duration > 0 && duration !== Infinity) {
					this._timer = setTimeout(function() {
						_this.hide();
					}, duration);
				}
			},
			hide: function hide() {
				this._timer = clearTimeout(this._timer);

				this.setData({
					isShow: false,
					backgroundColor: BG_COLOR
				});
			}
		}
	}
</script>

<style>
	.zan-toptips {
		display: block;
		position: fixed;
		-webkit-transform: translateZ(0) translateY(-100%);
		width: 100%;
		min-height: 64upx;
		top: 0;
		line-height: 2.3;
		font-size: 28upx;
		text-align: center;
		color: #fff;
		background-color: #e64340;
		z-index: 110;
		opacity: 0;
		-webkit-transition: all .4s ease;
		transition: all .4s ease
	}

	.zan-toptips--show {
		-webkit-transform: translateZ(0) translateY(0);
		opacity: 1
	}
</style>
